<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
</head>

<body>
  <div id="app">

    <comment-app></comment-app>
  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      组件模板必须要根节点

      组件通信应运而生
    */
    const bus = new Vue()
    const commentApp = {
      template: `
        <div class="container">
          <commentInput></commentInput>
          <commentList></commentList>
        </div>
      `
    }
    const commentInput = {
      template: `
        <div class="commentInput">
          <div class="form-group">
            <input type="text" class="form-control" v-model='comment.username'>
          </div>
          <div class="form-group">
            <textarea class="form-control" v-model='comment.comment'></textarea>
          </div>
          <div class="form-group clearfix">
            <button class="btn btn-success pull-right" @click='sendComment'>发布</button>
          </div>
        </div>
      `,
      data() {
        return {
          comment: {
            username: '',
            comment: '',
          }
        }
      },
      methods: {
        sendComment() {
          const
            d = new Date(),
            y = d.getFullYear(),
            m = d.getMonth() + 1,
            day = d.getDate(),
            h = d.getHours() < 10 ? '0' + d.getHours() : d.getHours(),
            min = d.getMinutes() ? '0' + d.getMinutes() : d.getMinutes(),
            s = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()

          var timer = y + '/' + m + '/' + day + '/ ' + h + ':' + min + ':' + s

          this.comment.postDate = timer
          bus.$emit('send:comment', Object.assign({}, this.comment))
          this.comment.comment = ''
        }
      }
    }
    const msg = {
      template:`
      <div v-if="msg" :class="['alert', {'alert-danger': alert_class === 'danger'}, {'alert-success': alert_class === 'success'}]" ></div>
      `,
      
    }
    const noData = {
      template: `
        <div class="list-group">
          <a href="#" class="list-group-item disabled">
            暂无评论
          </a>
        </div>
      `
    }
    const commentList = {
      template: `
        <div class="list-group" v-if='comments.length'>
          <commentItem @del:index='getIndex' :comment='comment' :index='index' v-for='(comment,index) in comments' :key='index'></commentItem>
        </div>
        <noData v-else></noData>
      `,
      data() {
        return {
          comments: [],
          msg:'',
          alert_class:'danger',
          t:null,
        }
      },
      methods: {
        getIndex(index) {
          this.comments.splice(index, 1)

        }

      },
      created() {
        bus.$on('send:comment', (comment) => {
          this.comments.push(comment)
        })
      }

    }
    const commentItem = {
      template: `
        <a href="javascript:;" class="list-group-item" >
          <button type="button" class="close" @click='delIndex(index)'><span>&times;</span></button>
          <h4 class="list-group-item-heading">{{comment.username}}</h4>
          <p class="list-group-item-text">{{comment.comment}}</p>
          <p class="text-muted text-right">{{comment.postDate}}</p>
        </a>
      `,
      props: ['comment', 'index'],
      methods: {
        delIndex(index) {
          this.$emit('del:index', index)
        }
      },
    }

    Vue.component('commentApp', commentApp)
    Vue.component('commentInput', commentInput)
    Vue.component('commentList', commentList)
    Vue.component('commentItem', commentItem)
    Vue.component('noData', noData)
    Vue.component('msg',msg)
    const app = new Vue({
      el: "#app",
      methods: {

      }

    })


  </script>
</body>

</html>